<!-- 以太网配置卡片 -->
<div class="card" id="ethernet-card">
    <h2><span class="menu__icon">🔌</span> 以太网配置</h2>
    <form id="ethernet-form">
        <!-- IP模式选择 -->
        <div class="form-group">
            <label>IP 模式</label>
            <div class="segmented-control">
                <input type="radio" id="eth-dhcp" name="eth_mode" value="dhcp" checked>
                <label for="eth-dhcp" class="segmented-control__label">DHCP (自动获取)</label>
                
                <input type="radio" id="eth-static" name="eth_mode" value="static">
                <label for="eth-static" class="segmented-control__label">静态 IP</label>
                
                <!-- 这个 div 是实现滑动效果的关键 -->
                <div class="segmented-control__glider"></div>
            </div>
        </div>

        <!-- 静态IP配置字段 (默认隐藏) -->
        <div id="eth-static-fields" class="static-fields">
            <div class="form-group">
                <label for="eth-ip">IP 地址</label>
                <input type="text" id="eth-ip" name="ip" placeholder="e.g., 192.168.1.100">
            </div>
            <div class="form-group">
                <label for="eth-netmask">子网掩码 (Netmask)</label>
                <input type="text" id="eth-netmask" name="netmask" value="255.255.255.0">
            </div>
            <div class="form-group">
                <label for="eth-gateway">网关 (Gateway)</label>
                <input type="text" id="eth-gateway" name="gateway" placeholder="e.g., 192.168.1.1">
            </div>
            <div class="form-group">
                <label for="eth-dns">DNS 服务器</label>
                <input type="text" id="eth-dns" name="dns" placeholder="e.g., 8.8.8.8">
            </div>
        </div>
        
        <button type="submit" class="btn">保存以太网配置</button>
    </form>
</div>

<!-- Wi-Fi STA 配置卡片 -->
<div class="card" id="wifi-card">
    <h2><span class="menu__icon">📡</span> Wi-Fi STA 配置</h2>
    <form id="wifi-form">
        <!-- Wi-Fi基本信息 -->
        <div class="form-group">
            <label for="ssid">Wi-Fi 名称 (SSID)</label>
            <input type="text" id="ssid" name="ssid" placeholder="输入要连接的Wi-Fi名称" required>
        </div>

        <div class="form-group">
            <label for="password">Wi-Fi 密码</label>
            <input type="text" id="password" name="password" placeholder="留空则为开放网络">
        </div>

        <hr style="margin: 20px 0; border: 1px solid #eee;">

        <!-- IP模式选择 -->
        <div class="form-group">
            <label>IP 模式</label>
            <div class="segmented-control">
                <input type="radio" id="wifi-dhcp" name="wifi_mode" value="dhcp" checked>
                <label for="wifi-dhcp" class="segmented-control__label">DHCP (自动获取)</label>
                
                <input type="radio" id="wifi-static" name="wifi_mode" value="static">
                <label for="wifi-static" class="segmented-control__label">静态 IP</label>
                
                <div class="segmented-control__glider"></div>
            </div>
        </div>

        <!-- 静态IP配置字段 (默认隐藏) -->
        <div id="wifi-static-fields" class="static-fields">
            <div class="form-group">
                <label for="wifi-ip">IP 地址</label>
                <input type="text" id="wifi-ip" name="ip" placeholder="e.g., 192.168.1.101">
            </div>
            <div class="form-group">
                <label for="wifi-netmask">子网掩码 (Netmask)</label>
                <input type="text" id="wifi-netmask" name="netmask" value="255.255.255.0">
            </div>
            <div class="form-group">
                <label for="wifi-gateway">网关 (Gateway)</label>
                <input type="text" id="wifi-gateway" name="gateway" placeholder="e.g., 192.168.1.1">
            </div>
            <div class="form-group">
                <label for="wifi-dns">DNS 服务器</label>
                <input type="text" id="wifi-dns" name="dns" placeholder="e.g., 8.8.8.8">
            </div>
        </div>
        
        <button type="submit" class="btn">保存 Wi-Fi 配置</button>
    </form>
</div>